<template>
  <div class="loan-application">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <h2>贷款申请</h2>
        </div>
      </template>
      
      <el-form 
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="application-form"
      >
        <!-- 申请人信息 -->
        <h3>申请人信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请人姓名" prop="applicantName">
              <el-input v-model="form.applicantName" placeholder="请输入申请人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入电子邮箱" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="居住地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入居住地址" />
        </el-form-item>

        <!-- 职业信息 -->
        <h3>职业信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工作单位" prop="company">
              <el-input v-model="form.company" placeholder="请输入工作单位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input v-model="form.position" placeholder="请输入职位" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="月收入" prop="monthlyIncome">
              <el-input-number 
                v-model="form.monthlyIncome" 
                :min="0" 
                :precision="2"
                style="width: 100%"
                placeholder="请输入月收入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作年限" prop="workYears">
              <el-input-number 
                v-model="form.workYears" 
                :min="0" 
                :precision="1"
                style="width: 100%"
                placeholder="请输入工作年限"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 贷款信息 -->
        <h3>贷款信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="贷款金额" prop="loanAmount">
              <el-input-number 
                v-model="form.loanAmount" 
                :min="0" 
                :precision="2"
                style="width: 100%"
                placeholder="请输入贷款金额"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="贷款期限" prop="loanTerm">
              <el-select v-model="form.loanTerm" placeholder="请选择贷款期限" style="width: 100%">
                <el-option label="12个月" value="12" />
                <el-option label="24个月" value="24" />
                <el-option label="36个月" value="36" />
                <el-option label="48个月" value="48" />
                <el-option label="60个月" value="60" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="贷款用途" prop="loanPurpose">
          <el-input 
            type="textarea" 
            v-model="form.loanPurpose" 
            :rows="3"
            placeholder="请说明贷款用途"
          />
        </el-form-item>

        <el-form-item label="还款来源" prop="repaymentSource">
          <el-input 
            type="textarea" 
            v-model="form.repaymentSource" 
            :rows="3"
            placeholder="请说明还款资金来源"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="loading">提交申请</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default {
  name: 'LoanApplication',
  setup() {
    const router = useRouter()
    const formRef = ref(null)
    const loading = ref(false)

    const form = reactive({
      applicantName: '',
      idCard: '',
      phone: '',
      email: '',
      address: '',
      company: '',
      position: '',
      monthlyIncome: 0,
      workYears: 0,
      loanAmount: 0,
      loanTerm: '',
      loanPurpose: '',
      repaymentSource: ''
    })

    const rules = {
      applicantName: [
        { required: true, message: '请输入申请人姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
      ],
      idCard: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入居住地址', trigger: 'blur' }
      ],
      company: [
        { required: true, message: '请输入工作单位', trigger: 'blur' }
      ],
      position: [
        { required: true, message: '请输入职位', trigger: 'blur' }
      ],
      monthlyIncome: [
        { required: true, message: '请输入月收入', trigger: 'blur' },
        { type: 'number', min: 0, message: '月收入必须大于0', trigger: 'blur' }
      ],
      workYears: [
        { required: true, message: '请输入工作年限', trigger: 'blur' },
        { type: 'number', min: 0, message: '工作年限必须大于0', trigger: 'blur' }
      ],
      loanAmount: [
        { required: true, message: '请输入贷款金额', trigger: 'blur' },
        { type: 'number', min: 0, message: '贷款金额必须大于0', trigger: 'blur' }
      ],
      loanTerm: [
        { required: true, message: '请选择贷款期限', trigger: 'change' }
      ],
      loanPurpose: [
        { required: true, message: '请说明贷款用途', trigger: 'blur' },
        { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
      ],
      repaymentSource: [
        { required: true, message: '请说明还款来源', trigger: 'blur' },
        { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
      ]
    }

    const handleSubmit = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        loading.value = true
        
        // TODO: 实现提交逻辑
        
        ElMessage.success('申请提交成功')
        router.push('/loan/record')
      } catch (error) {
        console.error('表单验证失败:', error)
      } finally {
        loading.value = false
      }
    }

    const resetForm = () => {
      if (!formRef.value) return
      formRef.value.resetFields()
    }

    return {
      formRef,
      form,
      rules,
      loading,
      handleSubmit,
      resetForm
    }
  }
}
</script>

<style scoped>
.loan-application {
  padding: 20px;
}

.form-card {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  font-size: 24px;
  color: #409EFF;
}

.application-form {
  margin-top: 20px;
}

h3 {
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #409EFF;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

.el-button {
  min-width: 120px;
}
</style> 